<template>
	<view class="shop-cart">
		<template v-if="cartList.length>0">
		<!-- 自定义导航栏？ -->
		<uniNavBar 
			title="购物车" 
			:left-text=' isNavBar?"完成":"编辑"'
			fixed="true"
			status-bar="true"
			@clickLeft="isNavBar=!isNavBar">
		</uniNavBar>
		<!-- 商品块内容 -->
		<view class="shop-list">
			<view class="shop-item" v-for="(item,index) in cartList" :key="index">
				<label class="radio" @tap="selectedItem(index)">
					<radio value="" color="#FF3333" :checked="item.checked"/><text></text>
				</label>
				<image class="shop-img" :src="item.leaf_img"></image>
				<view class="shop-text">
					<view class="shop-name">
						<text>{{item.leaf_name}}</text>
					</view>
					<view class="shop-color">{{item.leaf_num}}g</view>
					<view class="shop-price">
						<view>￥{{item.leaf_price}}</view>
						<view>*{{item.leaf_count}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部结算兰 -->
		<view class="shop-foot">
			<lable class="radio foot-radio" @tap="checkedAll()">
				<radio color="#ff3333" :checked="checkAllFn()"/><text>全选</text>
			</lable>
			<!-- 编辑结算按钮切换 -->
			<view class="foot-total" v-show="!isNavBar">
				<view class="foot-prince">合计：￥{{totalCount().pprice}}</view>
				<view class="foot-num" @click="pay()">结算({{totalCount().num}})</view>
			</view>
			<view v-show="isNavBar" class="foot-total">
				<view class="foot-num" @click="DelCart()">删除</view>
			</view>
		</view>
		
		</template>
		<template v-else>
			<uniNavBar title="购物车" status-bar="true" fixed="true"></uniNavBar>
			<view class="shop-else-list" >
				<view class="else-img">
					<image src="../../static/cartkong.png"  mode="aspectFill"></image>
				</view>			
				<view class="else-text">
					<text>购物车空空如也</text>
				</view>
			</view>
		</template>
	  </view>
</template>

<script>
	import uniNavBar from '@/uni_modules/uni-nav-bar/uni-nav-bar.vue'
	import getDateTime from "@/common/getDateTime.js"
	// import {mapState,mapActions,mapGetters,mapMutations} from 'vuex'
	export default{
		components:{
			uniNavBar
		},
		data(){
			return{
				userid:1,
				//购物车列表
				cartList:[],
				selectedList:[],
				// 编辑完成的切换
				isNavBar:false,
				//已选择的列表，初始为
				params:{
					ordercode:"",
					userid:1,
					leafid:1,
					num:100,
					count:1,
					price:0,
					date:"",
					state:3,
					username:'',
					address:'',
					phone:''
					//state:3待发货
				},
				totalpri:0
				
			}
		},
		onLoad(){
			this.getCartItem()
		},
		onShow(){
			this.getCartItem()
		},
		methods:{
			getCartItem(){
				var id=this.$baseName.user.userid
				console.log("用户id",id)
				uni.request({
					url:this.$baseUrl+'cart/find?userid='+id,
					//传递参数
					success:res=>{
						if(res.statusCode!=200){
							return uni.showToast({
								title:'获取数据失败'
							})
						}
						// this.LeafList=res.data.list
						console.log("结果",res)
						this.cartList=res.data.comlist
						
						
					}
				})
			},
			
			//是否全选按钮的checked属性
			checkAllFn(){
				return this.cartList.length===this.selectedList.length
			},
			//判断是否全选
			
			checkedAll(){
				//是全选时
				if(this.cartList.length===this.selectedList.length){
					
					this.unCheckAll()
				}
				else{
					
					this.checkAll()
				}
			},
			//合计 
			totalCount(){
				let total={
					pprice:0,
					num:0
				}
				console.log("输出选中商品",this.selectedList)
				this.cartList.forEach(v=>{
					if(this.selectedList.indexOf(v.cart_id)>-1){
						total.pprice+=v.leaf_price*v.leaf_count;
						total.num=this.selectedList.length;
					}
				})
				this.totalpri=total.pprice
				return total;
			},
			//全选
			checkAll(){
				this.selectedList=this.cartList.map(v=>{
					v.checked=1;
					return v.cart_id
					
				})
			},
			//全不选
			unCheckAll(){
				this.cartList.forEach(v=>{
					v.checked=0;
				})
				this.selectedList=[];
			},
			//单选  
			selectedItem(index){
				console.log(index)
				console.log(this.cartList)
				let id =this.cartList[index].cart_id;
				let i=this.selectedList.indexOf(id);
				console.log("选中没",i)
				//看是否在选中列表里,则移除selected
				if(i>-1){
					this.cartList[index].checked=0;
					this.selectedList.splice(i,1);
					console.log("1",this.selectedList)
					//删除数组中元素，一个
				}
				else{
				//如果没有选中，就加入选中列表
				this.cartList[index].checked=1;
				console.log("选中的商品id",id)
				this.selectedList.push(id);
				console.log("2",this.selectedList)
				}
			},
			//删除购物车内容
			DelCart(){
				// 删除数组库还是删除cartList中的元素
				//删除数据库中的信息
				console.log("删除内容",this.selectedList)
				uni.request({
					url:this.$baseUrl+'cart/del',				
					method:'POST',
					//传递参数
					data:this.selectedList,
					success:res=>{
						if(res.statusCode!=200){
							return uni.showToast({
								title:'删除失败'
							})
						}
						this.getCartItem()
						this.selectedList=[]
					}
				})
			},
			setPra(data){
				let time=getDateTime.dateTimeStr('ymdhis')
				let mark=Math.floor(Math.random() * (2000 - 1000 + 1)) + 1000
				let uid=this.$baseName.user.userid
				let order=uid+time+mark
				this.params.ordercode=order
				this.params.userid=uid
				this.params.leafid=data.leaf_id
				this.params.date=getDateTime.dateTimeStr('y-m-d h:i:s')	
				this.params.count=data.leaf_count
				this.params.price=this.totalpri
				this.params.num=data.leaf_num
				console.log("data.leaf_num",data.leaf_num)
				console.log("目前参数加入订单的时候",this.params)
			},
			pay(){
				if(this.selectedList.length>0){
					//选中的进行结算
					console.log("已选中的商品结算",this.selectedList)
					this.cartList.forEach(v=>{
						if(this.selectedList.indexOf(v.cart_id)>-1){
							this.setPra(v)
							
							this.addOrder()
							//还要减库存
							
						}
					})
					uni.showToast({
						title:'支付成功'
					})
					this.DelCart()
					this.getCartItem()
					this.selectedList=[]
				}else{
					return uni.showToast({
						title:'请先选择商品'
					})
				}
				
			},
			addOrder(){
				//结算的时候调用添加订单代码
				uni.request({
					url:this.$baseUrl+'order/add',
					method:'POST',
					//传递参数
					data:this.params,
					success:res=>{
						if(res.statusCode!=200){
							return uni.showToast({
								title:'支付失败'
							})
						}
						this.changeStore()
						console.log("下单成功")
						// this.LeafList=res.data.list
					}
				})
			},
			changeStore(){
				this.params.num=100
				console.log("参数是啥",this.params)
				uni.request({
					url:this.$baseUrl+'change/store',
					method:'POST',
					//传递参数
					data:this.params,
					success:res=>{
						if(res.statusCode!=200){
							return uni.showToast({
								title:'改库存失败'
							})
						}
						console.log("更改库存成功")
						// this.LeafList=res.data.list
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.shop-list{
		padding-bottom: 100rpx;
	}
	.shop-item{
		font-size: 24rpx;
		display: flex;
		padding: 20rpx;
		align-items: center;
		background-color: #f7f7f7;
		margin-bottom: 10rpx;
	}
	.shop-img{
		width: 150rpx;
		height: 150rpx;
	}
	.shop-color{
		font-size: 24rpx;
		padding: 5px 0;
	}
	.shop-price{
		display: flex;
		justify-content: space-between;
	}
	.shop-text{
		flex: 1;
		padding-left: 20rpx;
	}
	.shop-name{
		font-size: 30rpx;
		text{
			/* 文本超出部分...显示 */
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box ;
			-webkit-line-clamp:1;
			-webkit-box-orient:vertical;
		}
	}
	.shop-foot{
		border-top: 2rpx solid #f7f7f7;
		background-color: white;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.foot-radio{
		padding-left: 20rpx;
	}
	.foot-total{
		display: flex;
	}
	.foot-num{
		background-color: #d26940f5;
		color: #ffffff;
		padding: 0 60rpx;
		line-height: 100rpx;
	}
	.foot-prince{
		line-height: 100rpx;
		padding: 0 20rpx;
	}
	.shop-else-list{
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: #f7f7f7;
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.shop-else-list{
		display: flex;
		flex-direction: column;
		background-color: white;
		.else-text{
			margin-top: 40px;
			text{
				font-size: 17px;
			}
			
		}
	}
</style>
